<template>
  <div>

    <el-form :inline="true" :model="fro" class="demo-form-inline">
      <el-form-item label="商品名称">
        <el-input v-model="fro.spuName" placeholder="商品名称"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-input v-model="fro.publishStatus" placeholder="状态"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="primary" @click="dialogFormVisible = true">添加</el-button>
      </el-form-item>
    </el-form>

    <template>
      <el-table
          :data="tableData"
          border
          style="width: 100%">
        <el-table-column
            fixed
            prop="id"
            label="商品id"
            width="120">
        </el-table-column>
        <el-table-column
            prop="spuName"
            label="商品名称"
            width="120">
        </el-table-column>
        <el-table-column
            prop="spuDescription"
            label="商品描述"
            width="120">
        </el-table-column>
        <el-table-column
            prop="catalogId"
            label="所属分类id"
            width="120">
        </el-table-column>
        <el-table-column
            prop="brandId"
            label="品牌id"
            width="120">
        </el-table-column>
        <el-table-column
            prop="weight"
            label="重量"
            width="120">
        </el-table-column>
        <el-table-column
            prop="publishStatus"
            label="状态"
            width="120">
        </el-table-column>
        <el-table-column
            prop="createTime"
            label="创建时间"
            width="120">
        </el-table-column>
        <el-table-column
            prop="updateTime"
            label="更新时间"
            width="120">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="100">
          <template slot-scope="scope">
            <el-button @click="del(scope.row.id)" type="text" size="small">删除</el-button>
            <el-button @click="up(scope.row)" type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <el-pagination
        background
        :page-count="fro.num"
        :page-size="fro.size"
        @current-change="goto"
        layout="prev, pager, next"
        :total="total">
    </el-pagination>

    <el-dialog title="添加" :visible.sync="dialogFormVisible">
      <el-form :model="add" :rules="rules" ref="add">
        <el-form-item label="商品名称" :label-width="formLabelWidth" prop="spuName">
          <el-input v-model="add.spuName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品描述" :label-width="formLabelWidth" prop="spuDescription">
          <el-input v-model="add.spuDescription" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所属分类id" :label-width="formLabelWidth">
          <el-select v-model="add.catalogId" placeholder="请选择">
            <el-option
                v-for="c in category"
                :key="c.catId"
                :label="c.catId"
                :value="c.name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="品牌id" :label-width="formLabelWidth">
          <el-input v-model="add.brandId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="重量" :label-width="formLabelWidth" prop="weight">
          <el-input v-model="add.weight" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-input v-model="add.publishStatus" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="adds">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
export default {
  data(){
    return{
      category:[],
      dialogFormVisible:false,
      formLabelWidth:"120px",
      add:{
      },
      fro:{
        size:3,
        num:1,
      },
      total:0,
      tableData:[],
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ]
      }
    }
  },
  methods:{
    onSubmit(){
      this.axios.post("http://localhost:8081/order/list",this.fro).then(r=>{
        this.tableData=r.data.data.list;
        this.total=r.data.data.total;
        console.log(r);
      })
    },
    goto(page){
      this.fro.num=page;
      this.onSubmit();
    },
    adds(){
      this.axios.post("http://localhost:8081/order/add",this.add).then(r=> {
        if (r.data.code == 200) {
          this.$message.success(r.data.msg);
          this.dialogFormVisible=false;
          this.add={};
          this.onSubmit();
        } else {
          this.$message.error(r.data.msg);
        }
      })
    },
    del(id){
      this.axios.post("http://localhost:8081/order/del?id="+id).then(r=>{
        if (r.data.code == 200) {
          this.$message.success(r.data.msg);
          this.onSubmit();
        } else {
          this.$message.error(r.data.msg);
        }
      })
    },
    up(a){
      this.dialogFormVisible=true;
      this.add=a;
    },
    categorys(){
      this.axios.post("http://localhost:8081/order/category").then(r=>{
        this.category=r.data.data;
        console.log(r);
      })
    }
  },
  created() {
    this.onSubmit();
    this.categorys();
  }
}
</script>